<template>
  <div class="rt-x6-menu-item">
    <svg-icon class="svg" :icon-class="node.icon" :style="{color:node.color}" ></svg-icon>
    <!-- {{ text||node.text }} -->
    <el-tooltip  effect="light" placement="right">
      <div slot="content">
        <div class="tooltip-content">
          <p v-if="node.data.node.pluginName">{{node.data.node.pluginName}}</p>
          <p v-if="node.data.node.note">{{node.data.node.note}}</p>
           </div>
      </div>
      <span  class="item-span">{{ text||node.text }}</span>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    text: {
      type: String,
      default: '',
    },
    node: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

<style scoped lang="less">
.rt-x6-menu-item{
  white-space: nowrap;
  //  background-color: rgba(0,0,0,.02);
    padding: 8px 22px;
    cursor: move;
    &:hover{
         background-color: rgba(0,0,0,.03);
    }
}
.item-span{
  width: 100%;
  display: inline-block;
}
.tooltip-content{
  width: 200px;
}
</style>